<!--
 * @Author: wangming
 * @Date: 2022-04-22 14:57:53
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-29 18:01:18
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hmChildConfig/index.vue
 * @Description: 
-->
<template>
  <div>
    <!-- {{ value }} -->
    <el-form-item label="子表类型">
      <el-radio-group v-model="value.__config.formType" @change="chageType">
        <el-radio label="code">按字段</el-radio>
        <el-radio label="model">按模型</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="子表标题" class="tr" prop="title">
      <div class="table-title-config">
        <GlobalizationConfigWord class="mr10" @setLangCode="
          (title_i18n) => $set(value.__config, 'childTitle_i18n', title_i18n)
        " :localism="value.__config.childTitle_i18n"></GlobalizationConfigWord>
        <el-switch v-model="value.__config.childTitle" />
      </div>
      <el-input v-if="value.__config.childTitle" v-model="value.__config.childTitleContent" maxlength="128"
        size="small"></el-input>
    </el-form-item>
    <el-form-item
      v-if="value.__config.formType === 'code'"
      label="数据字段"
      prop="modelName"
      :rules="[
        {
          required: true,
          message: '数据字段不能为空',
          trigger: 'change',
        },
      ]"
    >
      <el-select
        @change="changeModel"
        :value="value.modelName"
        placeholder="请选择"
        size="small"
        class="mb10"
        style="width: 100%"
        filterable
      >
        <el-option
          v-for="(item, index) in chidlrenModels"
          :key="index"
          :label="`${item.name}【${item.code}】`"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <div v-else>
      <hmModule :value="value" formlabel="子表模型"></hmModule>
      <div class="ks-row-middle mb20 lh1">
        <div class="mr10 g3">关联字段映射</div>
        <i
          class="el-icon-circle-plus-outline iconcolor f20 poi"
          @click="addTag"
        ></i>
      </div>
      <el-table
        size="mini"
        :data="value.__config.valueTeamArg"
        border
        style="width: 100%"
      >
        <el-table-column prop="chidlrenKey" label="关联字段"> </el-table-column>
        <el-table-column prop="parentCode" label="映射字段"> </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <i
              class="el-icon-edit poi iconcolor"
              @click="editTag(scope.row, scope.$index)"
            ></i>
            <el-popconfirm
              placement="top"
              title="确定删除该关联字段吗？"
              @confirm="delTag(scope.$index)"
            >
              <i slot="reference" class="el-icon-delete ml10 poi del"></i>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import hmModule from "../hmModule.vue";
import basicmixins from "../basicmixins";
import { getHmentitymodelList } from "@/apis/paas/HmEntityModelController.js";
import addcode from "./__components__/addcode/index";
export default {
  components: { hmModule },
  mixins: [basicmixins],
  data() {
    return {
      myEntitymodelList: [],
      chidlrenModels: [],
    };
  },
  async created() {
    this.myEntitymodelList = await getHmentitymodelList({
      activated: true,
      modelKey: this.value.tableModelCode,
    });
    this.chidlrenModels = this.myEntitymodelList.filter(
      (i) => i.type === "SUB_TABLE"
    );
  },
  mounted() {},
  methods: {
    delTag(index) {
      this.value.__config.valueTeamArg.splice(index, 1);
    },
    async editTag(form, index) {
      let modelList = await getHmentitymodelList({
        activated: true,
        modelKey: this.value.__config.modelCode,
      });
      let value = { myEntitymodelList: this.myEntitymodelList, modelList };
      addcode.editForm(value, form).then((res) => {
        this.value.__config.valueTeamArg.splice(index, 1, res);
      });
    },
    async addTag() {
      if (!this.value.__config.modelCode) {
        this.$message.info("请选择业务模型");
        return;
      }
      let modelList = await getHmentitymodelList({
        activated: true,
        modelKey: this.value.__config.modelCode,
      });
      let value = { myEntitymodelList: this.myEntitymodelList, modelList };
      addcode.addForm(value).then((res) => {
        this.value.__config.valueTeamArg.push(res);
      });
    },
    chageType() {
      this.value.modelName = "";
      this.value.__config.modelCode = "";
      this.value.__config.valueTeamArg = [];
    },
    changeModel(code) {
      this.value.modelName = code;
      try {
        let field = this.chidlrenModels.find((v) => v.code === code) || {};
        let { value, modelCode } = JSON.parse(field.config);
        this.value.__config.modelCode = modelCode;
        this.value.__config.valueTeamArg = [
          {
            parentCode: "id",
            chidlrenKey: value,
          },
        ];
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.table-title-config {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
